<template>
	<u-navbar :is-back="false" title="">
		<view class="slot-wrap">
			<view class="back-box" @click="back">
				<view class="icon">
					<u-icon name="arrow-left" color="#999999" size="30"></u-icon>
				</view>
				<view class="back">返回</view>
			</view>
			<view class="title-box">立即提现</view>
			<view class="more-box">提交信息</view>
		</view>
	</u-navbar>
	<view class="paypal-sure">
		<view class="paypal-sure-content">
			<view class="sure-contents">
				<view class="sure-title">
					<text>提现金额</text>
					<text>全部提现</text>
				</view>
				<view class="write-money-number">
					<input type="text" placeholder="请输入需要提现金额" />
					<text>全部收益：￥3,000</text>
				</view>
				<view class="sure-paypal-title">
					<text>请选择提现到</text>
				</view>
				<view class="select-function">
					<view class="select-function-for" :class="currrentIndex == k ? 'actives' : ''"
						@click="selectPaypalChange(s,k)" v-for="s,k in selectData">
						<image :src="s.image" mode=""></image>
						<text>{{s.text}}</text>
					</view>
				</view>
				<view class="sure-button">
					<button>立即提现</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'

	const selectData = ref([{
		image: '../../static/wechats.png',
		text: '微信'
	}, {
		image: '../../static/alipay.png',
		text: '支付宝'
	}])

	const currrentIndex = ref(0)
	const selectPaypalChange = (s, k) => {
		currrentIndex.value = k
	}
</script>

<style lang="scss" scoped>
	.slot-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 1;

		.title-box {
			opacity: 1;
			/** 文本1 */
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 23.17px;
			color: rgba(0, 0, 0, 1);
		}

		.more-box {
			opacity: 0;
			/** 文本1 */
			font-size: 10px;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 14.48px;
			color: rgba(0, 0, 0, 1);
			padding-right: 28rpx;
		}

		.back-box {
			display: flex;
			align-items: center;
			padding-left: 28rpx;

			.back {
				opacity: 1;
				/** 文本1 */
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 14.48px;
				color: rgba(0, 0, 0, 1);
			}
		}

		/* 如果您想让slot内容占满整个导航栏的宽度 */
		/* flex: 1; */
		/* 如果您想让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */

	}

	.paypal-sure {
		margin: 0 30rpx;
		padding-top: 40rpx;

		.paypal-sure-content {
			.sure-contents {
				.sure-title {
					display: flex;
					align-items: flex-end;
					justify-content: space-between;

					text {
						font-size: 34rpx;

						&:nth-last-child(1) {
							font-size: 24rpx;
							color: #3377FE;
						}
					}
				}

				.write-money-number {
					margin-top: 50rpx;

					input {
						border-bottom: 1px solid #eee;
						padding-bottom: 20rpx;
						margin-bottom: 6rpx;
						font-size: 34rpx;
						font-family: 'SYLI';

						&::placeholder {
							color: #eee;
						}
					}

					text {
						font-size: 22rpx;
						color: #aaa;
						font-family: 'SYXT';
					}
				}

				.sure-paypal-title {
					margin-top: 48rpx;

					text {
						font-size: 34rpx;
						font-family: 'SYCY';
					}
				}

				.select-function {
					display: flex;
					align-items: center;
					justify-content: space-around;
					margin-top: 60rpx;

					.select-function-for {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						padding: 20rpx;
						box-shadow: 0 0 10rpx rgba(170, 170, 170, .25);
						width: 100rpx;
						height: 100rpx;
						border-radius: 20rpx;
						border: 1px solid transparent;

						image {
							width: 48rpx;
							height: 48rpx;
						}

						text {
							font-size: 26rpx;
							margin-top: 4rpx;
							font-family: 'SYCY';
						}
					}
				}
			}
		}
	}

	.sure-button {
		margin-top: 80rpx;

		button {
			background: #FF8C00;
			color: white;
			border-radius: 1000rpx;
			font-size: 28rpx;
			padding: 6rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: 'SYCY';

			&::after {
				display: none;
			}
		}
	}


	.actives {
		border: 1px solid #3377FE !important;

		text {
			color: #3377FE;
		}
	}
</style>